import React from 'react'
import { Space, List, Switch } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Button, Input, Form, Picker, } from 'react-vant'
import { Image, NavBar, Toast } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
// import { Loading } from '@nutui/icons-react'
// import {useNavigate} from 'react-router-dom'
export default function Getimg() {
  let navigate = useNavigate()
  // 获取手机号
  let users = sessionStorage.getItem('users')
  let phone = ''
  if (users) {
    try {
      const userObj = JSON.parse(users)
      // console.log(userObj);
      phone = userObj.phone
      // console.log(phone);
      // 获取前三位添加4个*然后再添加手机号的后四位
      phone = `${phone.slice(0, 3)}****${phone.slice(7)}`

    } catch (error) {
      console.log('users为空');

    }
  }
  const imageText: React.CSSProperties = {
    width: 100,
    marginTop: 5,
    textAlign: 'center',
    color: '#999',
  }

  return (
    <div id='getimg'>
      <div className="top">
        <NavBar
          style={{ backgroundColor: '#FFFFFF' }}
          back={
            <>
              <ArrowLeft />
              返回
            </>
          }
          onBackClick={()=>{navigate(-1)}}
        >
          实名认证
        </NavBar>
        {/* <ArrowLeft></ArrowLeft> */}
      </div>
      <div className="cen" >
        <p style={{ fontSize: '0.5333rem', fontWeight: 'bold', textAlign: 'center', marginTop: '0.2rem' }}>请进行人脸识别以验证身份</p>
        <span style={{ fontSize: '12px', color: '#AAACAA', textAlign: 'center', display: 'block', marginTop: '0.2rem', letterSpacing: '2px' }}>请核对登录信息一致，将正脸对准框内，保持光线充足</span>

        <div style={{ display: 'flex', flexWrap: 'wrap', backgroundColor: '#E5E5E5', width: '4.6667rem', height: '4.6667rem', margin: '0.8rem auto', borderRadius: '50%' }}>
          <div style={{ width: 20, margin: ' auto' }}>
            <Image
              width="10"
              height="10"
              lazy
              onLoad={() => {
                console.log('image onload')
              }}
            />
            {/* <div style={imageText}>默认</div> */}
          </div>
        </div>

        <p style={{ fontSize: '0.2667rem', textAlign: 'center', letterSpacing: '2px' }}>当前登录用户:
          <span style={{ color: 'blue' }}>{phone}</span>
        </p>


        <p style={{ fontSize: '12px', color: 'red', textAlign: 'center', marginTop: '1.2rem' }}>
          <span>
            <svg style={{ height: '0.4rem', width: '0.4rem', position: 'relative', right: '0.05rem', top: '0.04rem' }} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2579" width="200" height="200"><path d="M512 992C246.912 992 32 777.088 32 512 32 246.912 246.912 32 512 32c265.088 0 480 214.912 480 480 0 265.088-214.912 480-480 480zM480 256v352a32 32 0 0 0 64 0V256a32 32 0 0 0-64 0z m-16 528a48 48 0 1 0 96 0 48 48 0 0 0-96 0z" p-id="2580" fill="#2D83FB"></path></svg>
          </span>
          <span style={{ textAlign: 'center', display: 'inline-block', letterSpacing: '1px' }}>
            人脸识别信息将上传至数据库，必要时公安机关可依法取证
          </span>
        </p>
        <Button onClick={() => { navigate('/getuserimg') }} round nativeType='submit' style={{ backgroundColor: '#2D83FB', color: 'white', width: '8rem', marginLeft: '1.0667rem', marginTop: '0.2667rem' }} block>
          开始验证
        </Button>
      </div>
    </div>
  )
}
